import { EditableProTable, ProColumns } from "@ant-design/pro-components";
import { Button, Divider } from "antd";
import React, { FC } from "react";
import { IndexInfoProps } from "../model";
import { useModel } from "@umijs/max";


const IndexList: FC = () => {
    const {
        indexInfoList,
        setIndexInfoList,
        indexInfoKeys,
        setIndexInfoKeys,
        addIndexInfoRow,
        deleteIndexInfoItem,
        fieldInfoList,
        canEditIndexInfo
    } = useModel('TableInfo.model', (model) => ({
        indexInfoList: model.indexInfoList,
        setIndexInfoList: model.setIndexInfoList,
        indexInfoKeys: model.indexInfoKeys,
        setIndexInfoKeys: model.setIndexInfoKeys,
        addIndexInfoRow: model.addIndexInfoRow,
        deleteIndexInfoItem: model.deleteIndexInfoItem,
        fieldInfoList: model.fieldInfoList,
        canEditIndexInfo: model.canEditIndexInfo

    }));
    const selectData = fieldInfoList.map(item => ({
        label: item.name,
        value: item.code
    }))


    const columns: ProColumns<IndexInfoProps>[] = [
        {
            title: '操作',
            // valueType: 'option',
            width: 90,
            editable: false,
            render: (a, b, c) => {
                return <>
                    <span className="d_icon" onClick={() => deleteIndexInfoItem(c)}>删除</span>
                    <Divider type="vertical" />
                    <span className="e_icon" onClick={() => canEditIndexInfo(b.id!)}>编辑</span>

                </>
            },
        },
        {
            title: 'id',
            dataIndex: 'id',
            editable: false,
            width: 120,
        },

        {
            title: '字段名称',
            dataIndex: 'filedName',
            width: 150,
            valueType: "select",
            fieldProps: {
                mode: 'multiple',
                options: selectData,
            },
        },

        {
            title: '备注',
            dataIndex: 'comment',
            width: 150,
        },


        {
            title: '索引类型',
            dataIndex: 'indexType',
            width: 120,
            valueType: 'select',
            valueEnum: {
                INDEX: {
                    text: '普通索引',
                },
                UNIQUE: {
                    text: '唯一索引',
                },
            },
        },

    ];

    const onDataChange = (value: readonly any[]) => {
        setIndexInfoList({ ...value } as []);
    };
    return (
        <>
            <EditableProTable<IndexInfoProps>
                rowKey="id"
                search={false}
                columns={columns}
                value={indexInfoList}
                editable={{
                    type: 'multiple',
                    editableKeys: indexInfoKeys,
                    onChange: setIndexInfoKeys,
                    actionRender: (row, config, defaultDoms) => {
                        return [defaultDoms.delete];
                    },
                    onValuesChange: (record, recordList) => {
                        setIndexInfoList(recordList);
                    },
                }}
                onChange={onDataChange}
                recordCreatorProps={false}


            />
            &nbsp;
            <Button block color="default" variant="dashed" onClick={addIndexInfoRow}>+增加一行数据</Button>
        </>
    )
}
export default IndexList;